<template>
    <div class="center_div">
        <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%;margin-top: 20px">
            <el-tab-pane label="会议预定审批"  name="会议预定审批" >
                <el-table :data="approvalMeeting" v-loading="tableLoading" element-loading-text="Loading">
                    <el-table-column prop="meetingname" label="会议名" min-width="70"></el-table-column>
                    <el-table-column prop="roomname" label="会议室" min-width="90"></el-table-column>
                    <el-table-column prop="employeename" label="发起人" min-width="70"></el-table-column>
                    <el-table-column prop="starttime" label="开始时间" min-width="130"></el-table-column>
                    <el-table-column prop="endtime" label="结束时间" min-width="130"></el-table-column>
                    <el-table-column prop="reservationtime" label="预定时间" min-width="130"></el-table-column>
                    <el-table-column prop="description" label="会议描述" min-width="70" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column label="详情" min-width="120" align="center">
                        <template slot-scope="scope">
                            <el-button type="success" v-loading="peopleLoading" @click="lookPeople(scope.row.meetingid)">参会人员</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="150" align="center">
                        <template slot-scope="scope">
                            <el-button type="success" @click="passMeeting(scope.row.meetingid)">通过</el-button>
                            <el-button type="warning" @click="unpassMeeting(scope.row.meetingid)">驳回</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="会议取消审批" name="会议取消审批" >
                <el-table :data="approvalCancelMeeting" v-loading="tableLoading" element-loading-text="Loading">
                    <el-table-column prop="meetingname" label="会议名" min-width="70"></el-table-column>
                    <el-table-column prop="roomname" label="会议室" min-width="90"></el-table-column>
                    <el-table-column prop="employeename" label="发起人" min-width="70"></el-table-column>
                    <el-table-column prop="starttime" label="开始时间" min-width="130"></el-table-column>
                    <el-table-column prop="endtime" label="结束时间" min-width="130"></el-table-column>
                    <el-table-column prop="canceledtime" label="取消时间" min-width="130"></el-table-column>
                    <el-table-column prop="description" label="取消理由" min-width="70" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column label="操作" min-width="150" align="center">
                        <template slot-scope="scope">
                            <el-button type="success" @click="passCancelMeeting(scope.row.meetingid)">通过</el-button>
                            <el-button type="warning" @click="unpassCancelMeeting(scope.row.meetingid)">驳回</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <el-dialog
                title="参会人员"
                :visible.sync="drawerShow"
                width="30%">
            <ul>
                <li v-for="item in people" :key="item.username" style="margin-top: 20px; margin-left: 30%">
                    <el-tag type="primary">
                        <span v-if="item.role === 0">员工</span>
                        <span v-if="item.role === 1">组长</span>
                        <span v-if="item.role === 2">部长</span>
                        {{item.employeename}} - {{item.username}}
                    </el-tag>
                </li>
            </ul>
            <span slot="footer" class="dialog-footer">
    <el-button @click="drawerShow = false">关 闭</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "amuse-grant",
        data() {
            return{
                activeName: '会议预定审批',
                approvalMeeting:  [
                    {meetingid: 1, meetingname: '测试1',roomname: '专用会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
                    {meetingid: 2, meetingname: '测试1',roomname: '专用会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
                    {meetingid: 3, meetingname: '测试1',roomname: '专用会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
                    {meetingid: 4, meetingname: '测试1',roomname: '专用会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
                    {meetingid: 5, meetingname: '测试1',roomname: '专用会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
                    {meetingid: 6, meetingname: '测试1',roomname: '专用会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'}
                ],
                approvalCancelMeeting:  [
                    {meetingid: 1, meetingname: '测试1',roomname: '专用会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
                    {meetingid: 2, meetingname: '测试1',roomname: '专用会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
                    {meetingid: 3, meetingname: '测试1',roomname: '专用会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
                    {meetingid: 4, meetingname: '测试1',roomname: '专用会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
                    {meetingid: 5, meetingname: '测试1',roomname: '专用会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'}
                ],
                pages: 1,
                tableLoading: false,
                people: [
                    {role:2, employeename: "李大二",username: "lide"},
                    {role:1, employeename: "魏小肖",username: "weixx"},
                    {role:0, employeename: "王小五",username: "wangxw"},
                    {role:0, employeename: "杜小满",username: "duxm"}
                ],
                peopleLoading: false,
                drawerShow: false
            }
        },
        created() {
            this.fetchMeeting(this.pages)
        },
        methods: {
            handleClick(key) {
                console.log(key)
            },
            async passMeeting(meetingid){
                console.log(meetingid)
                this.MeetingApproval(meetingid,1)
            },
            async unpassMeeting(meetingid){
                console.log(meetingid)
                this.MeetingApproval(meetingid,0)
            },
            async passCancelMeeting(meetingid){
                console.log(meetingid)
                this.MeetingApproval(meetingid,0)
            },
            async unpassCancelMeeting(meetingid){
                console.log(meetingid)
                this.MeetingApproval(meetingid,1)
            },
            async fetchMeeting(page) {
                this.tableLoading = true
                let {code ,data ,msg} = await this.$post('/admin/examinemeeting',{
                    data: {pages: page}
                })
                if(code === 200) {
                    this.approvalMeeting = data.passmts
                    this.approvalCancelMeeting = data.cancelmts

                    this.$formatDateForObjectInArray(
                        this,
                        ['approvalMeeting','approvalCancelMeeting']
                    )
                }else {
                    this.$message.error(msg)
                }
                this.tableLoading = false
            },
            async MeetingApproval(id, status){
                let {code ,data ,msg} = await this.$post('/admin/updatemetstatus',{
                    data: {'meetingid': id, 'status': status}
                })
                if(code !== 200) {
                    console.log(data)
                    this.$message.error('审核失败' + msg)
                } else {
                    console.log(data)
                    this.$message({
                        message: '成功更新状态',
                        type: 'success'
                    })
                    this.fetchMeeting(1)
                }
            },
            async lookPeople(id) {
                console.log(id)
                this.people = []
                this.peopleLoading = true
                let {code ,data ,msg} = await this.$post('/meetingdetails',{
                    data: {id: id}
                })
                if(code === 200) {
                    for (let i = 0; i < data.people.length; i++){
                        if (data.people[i]) {
                            this.people.push (data.people[i])
                        }
                    }
                }else {
                    this.$message.error(msg)
                }
                console.log(this.people)
                this.peopleLoading = false
                this.drawerShow = true
            }
        }
    }
</script>

<style >
    .center_div{
        width: 60%;
        margin:0 auto;
        margin-bottom: 50px;
    }
</style>